<template>
  <div>
    <a-form
      class="w-[60%] mx-auto"
      :label-col="{
        span: 6,
      }"
      :rules="rules"
      ref="formRef"
      v-if="form"
      :model="form.api"
    >
      <a-form-item :label="t('Data Connection')">
        <a-radio-group>
          <a-radio checked>{{ t('Incremental connection') }}</a-radio>
        </a-radio-group>
      </a-form-item>
      <template v-if="form.cashierPlatform === 'yf'">
        <a-form-item :label="t('Developer Key')" name="appKey">
          <a-input v-model:value="form.api.appKey" />
        </a-form-item>

        <a-form-item :label="t('Secret Key')" name="appSecret">
          <a-input allow-clear v-model:value="form.api.appSecret" />
        </a-form-item>

        <a-form-item :label="t('Merchant ID')" name="shopAdminId">
          <a-input allow-clear v-model:value="form.api.shopAdminId" />
        </a-form-item>

        <a-form-item :label="t('Store Code GID')" name="storeId">
          <a-input allow-clear v-model:value="form.api.storeId" />
        </a-form-item>
      </template>

      <template v-else-if="form.cashierPlatform === 'td'">
        <a-form-item :label="t('Port')" name="port">
          <a-input-number :max="65535" :min="100" allow-clear v-model:value="form.api.port" />
        </a-form-item>

        <a-form-item :label="t('Secret Key')" name="secret" required>
          <a-input allow-clear v-model:value="form.api.secret" />
        </a-form-item>

        <a-form-item :label="t('User')" name="user" required>
          <a-input allow-clear v-model:value="form.api.user" />
        </a-form-item>

        <a-form-item :label="t('Password')" name="password" required>
          <a-input-password allow-clear v-model:value="form.api.password" />
        </a-form-item>
      </template>
    </a-form>

    <a-col :span="24">
      <a-divider></a-divider>
      <div class="text-center">
        <a-button-group>
          <a-button @click="prevStep">{{ t('Previous step') }}</a-button>
          <a-button @click="nextStep">{{ t('Next step') }}</a-button>
        </a-button-group>
      </div>
    </a-col>
  </div>
</template>

<script setup lang="ts">
import { fieldsDropdownList } from '@/data/data';
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import { postApiDataMap } from '../fetch';
import type { DataConnectionForm } from '../types';
import type { API_STORE } from './data';

const { t } = useI18n();
const step = defineModel<number>('step');
const form = defineModel<DataConnectionForm>('form');
const formRef = ref<FormInstance>();

const rules: Partial<Record<keyof DataConnectionForm['api'], Rule[]>> = {
  appKey: [{ required: true }],
  appSecret: [{ required: true }],
  port: [{ required: true }],
};

const prevStep = () => {
  step.value!--;
};

const nextStep = async () => {
  try {
    await formRef.value?.validate();
    if (form.value) {
      const { data } = await postApiDataMap[form.value.cashierPlatform as API_STORE](
        form.value.api,
      );
      fieldsDropdownList.value = data.data;
      step.value!++;
    }
  } catch (error) {}
};
</script>

<style lang="scss" scoped></style>
